<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-全选,全否,反选案例</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 全选
            $("button").eq(0).click(function () {
                $("input").prop("checked", true);
            });

            // 全否
            $("button").eq(1).click(function () {
                $("input").prop("checked", false);
            });

            // 反选
            $("button").eq(2).click(function () {
                let $inputArr = $("input");
                for (let i = 0; i < $inputArr.length; i++) {
                    $inputArr.eq(i).prop("checked", !$inputArr.eq(i).prop("checked"));
                }
            });
        })
    </script>
</head>
<body>
<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby">rap
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">写bug
<input type="checkbox" name="hobby">购物
<button>全选</button>
<button>全否</button>
<button>反选</button>
</body>
</html>